<template>
  <VueBetterScroll
    ref="scroll"
    :pullDownRefresh="pullDownRefreshObj"
    :options="options"
    @pulling-down="onPullingDown"
  >
    <div class="container_con">
      <Swiper class="container_swiper" :swiperList="swiperList" />

      <BtnList class="container_btnlist" />
      <div class="container_content">
        <slot></slot>
      </div>

      <div class="container_title--con">
        <img :src="TITLE3" alt="" class="container_title3" />
        <StoryList />

        <!-- TODO: -->
        <div class="container_stories" @click="getAllStory">
          查看全部车票故事
        </div>
      </div>
    </div>
  </VueBetterScroll>
</template>

<script>
import { isLogin } from "@/utils/login";
import { getEnv, envFunc } from "@/utils/util";
import { HEAD, TITLE3 } from "@/constant";
import { swiperApi, activityrule } from "@/service";
import StoryList from "./storyList";
import Swiper from "../swiper";
import BtnList from "./btnList";
import VueBetterScroll from "vue2-better-scroll";

export default {
  components: {
    Swiper,
    BtnList,
    StoryList,
    VueBetterScroll
  },
  data: function() {
    return {
      HEAD,
      TITLE3,
      swiperList: [],
      pullDownRefreshObj: {
        threshold: 50,
        stop: 40
      },
      options: {
        useTransition: false
      }
    };
  },
  computed: {
    app() {
      return this.$store.state.app;
    },
    modalStatus() {
      return this.$store.state.modalStatus;
    }
  },
  methods: {
    getAllStory() {
      setHmt("home", "read");

      envFunc(
        () => {
          bridge.naviPlugins.openWebPage({
            webPageUrl:
              "https://zhuanti.chebada.com/act/h5/12e7cf3fee0122cd335a309f4ccf0ad7/"
          });
        },
        () => {
          wx.miniProgram.navigateTo({
            url: `/pages/webview/webview?url=${encodeURIComponent(
              "https://zhuanti.chebada.com/act/h5/12e7cf3fee0122cd335a309f4ccf0ad7/"
            )}`
          });
          // location.href =
          //   "https://zhuanti.chebada.com/act/h5/12e7cf3fee0122cd335a309f4ccf0ad7/";
        }
      );
    },
    async onPullingDown() {
      await this.$store.dispatch("main");
      this.$refs.scroll.forceUpdate(true);
    }
  },
  async created() {
    const res = await isLogin();
    const env = await getEnv();

    // TODO: undo this
    this.$store.commit("changeIsLogin", res);
    this.$store.commit("changeEnv", env);
    // this.$store.commit("changeIsLogin", true);

    try {
      let { winningList } = await swiperApi();
      let { ruleContent } = await activityrule();

      this.$store.commit("changeRuleContent", ruleContent);
      this.swiperList = winningList;
      // 登录就去调用主页接口
      //TODO: undo this
      if (res) {
        await this.$store.dispatch("main");
        this.$nextTick(() => {
          this.$refs.scroll.refresh();
          this.$refs.scroll.forceUpdate(true);
          let extraTransform = {
            // 起点的属性
            start: {
              scale: 0
            },
            // 终点的属性
            end: {
              scale: 1.1
            }
          };

          this.$refs.scroll.scrollTo(0, -10, 0, undefined, extraTransform);
        });
      }
    } catch (e) {
      console.log(e);
    }

    // this.$store.dispatch("main");
  },
  mounted() {
    this.$store.commit("changeBs", this.$refs.scroll);
    // this.$refs.scroll.refresh();

    // debugger;
  }
};
</script>

<style lang="scss" scoped>
.container_con {
  background-image: url("https://zhuanti.chebada.com/image/zhuanti/2021aniversary/head.jpg");
  background-size: 100% auto;
  background-repeat: no-repeat;
  padding: 0 20px 130px 20px;
  padding-top: 391px;
  position: relative;
  -webkit-overflow-scrolling: unset;

  .container_swiper {
    position: absolute;
    top: 24px;
    right: 10px;
    max-width: 380px;
  }

  .container_btnlist {
    position: absolute;
    top: 110px;
    right: 0;
  }
  .container_content {
    // margin: 0 20px;
  }

  .container_title--con {
    text-align: center;
    margin-top: 70px;
    .container_title3 {
      width: 238px;
    }

    .container_stories {
      font-size: 34px;
      width: 454px;
      height: 110px;
      background: linear-gradient(90deg, #fd6645, #f93f2b);
      border-radius: 55px;
      line-height: 110px;
      font-weight: 800;
      color: #ffffff;
      margin: 67px auto 0 auto;
    }
  }
}
</style>

<style>
.after-trigger {
  color: #000 !important;
  font-size: 32px !important;
}

.pulldown-wrapper {
  /* z-index: -1; */
}
</style>
